<template>
    <Category />

    <el-card
    shadow="always"
    :body-style="{ padding: '20px' }"
    :style="{ marginTop: '30px' }"
  >
    <template #header>
      <el-button type="primary" size="default" @click="" :icon="Plus"
        >新增属性</el-button
      >
    </template>
    <!-- card body -->
    <el-table border stripe :data="attrList">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column
        label="属性名称"
        width="150"
        prop="attrName"
      ></el-table-column>
      <el-table-column label="属性值名称列表" prop="attrValueList">
        <template v-slot="{ row }">
          <el-tag
            type="danger"
            size="default"
            effect="dark"
            v-for="item in row.attrValueList"
            :key="item.id"
            >{{ item.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <el-button
          type="warning"
          size="default"
          @click=""
          :icon="Edit"
        ></el-button>
        <el-button
          type="danger"
          size="default"
          @click=""
          :icon="Delete"
        ></el-button>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Atrr",
});
</script>

<script setup lang="ts">
import {ref,watch} from "vue";
import { Plus,Edit,Delete } from "@element-plus/icons-vue"
import {requestAttrList} from "@/api/attr";
import type {attrListType} from "@/api/attr";
//引入attrStore
import useAttrStore from "@/stores/attr"
//引入解构store数据的api
import {storeToRefs} from "pinia";

const attrStore = useAttrStore()
const {category1Id,category2Id,category3Id} = storeToRefs(attrStore)

//存放三级列表的数据
const attrList = ref<attrListType>([]);
//监听第三级分类的改变，然请求属性列表
watch(category3Id,async(newValue)=>{
    if(!newValue) return;
    const result =await requestAttrList(
    category1Id.value as number,
    category2Id.value as number,
    category3Id.value as number
 );
 attrList.value = result
},{immediate:true});
</script>